<template>
	<view>
		<input class="uni-input" @input="onKeyInput" placeholder="输入同步到view中" />
		<view>
			<view @click="del">删除历史记录</view>历史记录:
			<view class="lsjl"><view v-for="(item,index) in historyList" :key="index">{{item}}</view></view>
		</view>
		<view>
			<view v-for="(item,index) in list" :key="index">
				<image :src="item.img" />
				{{item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		debounce
	} from 'lodash'
	export default {
		data() {
			return {
				inputValue: '',
				list: [],
				listCopy: [],
				historyList: [],
			};
		},
		methods: {
			getList() {
				uni.request({
					url: "http://localhost:3000/list"
				}).then((resp) => {
					this.list = resp[1].data
					this.listCopy = resp[1].data
				})
			},
			onKeyInput: debounce(function(event) {
				this.inputValue = event.target.value
				if (this.inputValue !== "") {
					this.historyList.unshift(this.inputValue)
					this.list = this.list.filter((item) => item.title.includes(this.inputValue))
				} else {
					this.list = this.listCopy
				}
			}, 300),
			del() {
				this.historyList = []
			}
		},
		created() {
			this.getList()
		}
	}
</script>

<style lang="scss">
	.lsjl {
		display: flex;
	}
	
	.lsjl view{
		width: auto;
		height: auto;
		background: #ccc;
		margin-left: 5px;
	}

	.uni-input {
		border: 1px solid #000;
		height: 30px;
		border-radius: 30px;
	}

	image {
		width: 100px;
		height: 100px;
	}
</style>